<template>
  <svg
    aria-hidden="true"
    class="svg-icon"
    :width="props.size"
    :height="props.size"
    :style="{ color: props.color }">
    <use :href="symbolId"/>
  </svg>
</template>

<script lang="ts" setup>
  import { computed, defineProps } from 'vue';
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#222'
    },
    size: {
      type: String,
      default: '1em'
    }
  });
  const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>
